<template>
  <container-template 
    :nav-info="navInfo" 
    :nav-style="navStyle"
    @hoverHandler="handleChange"
  >
    hello. it's maoyan
  </container-template>
</template>

<script>
import ContainerTemplate from './ContainerTemplate.vue'

export default {
  components: {
    ContainerTemplate
  },
  data() {
    return {
      navStyle: 'background-image: linear-gradient(to right, rgb(250, 60, 104) 2%, rgb(254, 70, 77) 97%, rgb(250, 60, 104) 100%)',
      navInfo: {
        title: '猫眼电影',
        items: [
          {
            kind: 'new',
            keyword: '热映',
            text: '正在热映'
          },
          {
            kind: 'preview',
            keyword: '即将上映',
            text: '即将上映'
          }
        ]
      }
    }
  },
  methods: {
    handleChange([keyword, kind]) {
      console.log(keyword, kind)
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
